﻿import QtQuick 2.0
import QtGraphicalEffects 1.12
import QtQuick.Controls 2.12

Item {
    id: root
    property int type: 0    // 0正确 1错误 2警告
    property string text: "这是一个空的消息提示"

    height: 50*dp
    width: 310*dp

    Timer{
        id: timer_toast
        interval: 3000
        repeat: false
        triggeredOnStart: false
        onTriggered: {
            up()
        }

    }

    function show(msg, type){
        down()
        root.type = type
        root.text = msg
        timer_toast.restart()
    }

    function down(){    // 从上向下滑下来
        rect.state = "downState"
    }
    function up(){      // 再滑上去
        rect.state = "upState"
    }
    // 这里应该是加两个State的切换

    clip: true

    Rectangle{
        id: rect
        height: 44*dp
        width: parent.width - 10*dp
        x: 5*dp
        state: "upState"
        states:[
            State {
                name: "downState"
                PropertyChanges {
                    target: rect
                    y: 2*dp
                }
            },
            State {
                name: "upState"
                PropertyChanges {
                    target: rect
                    y: -55*dp
                }
            }
        ]
        transitions: [
            Transition {
                from: "downState"
                to: "upState"
                NumberAnimation{
                    properties: "y"
                    duration: 150
                    easing.type: Easing.InOutQuad
                }
            },Transition {
                from: "upState"
                to: "downState"
                NumberAnimation{
                    properties: "y"
                    duration: 150
                    easing.type: Easing.InOutQuad
                }
            }
        ]


        border.color: Qt.rgba(0, 0, 0, 0.01)
        border.width: 12*dp

        layer.enabled: true
        layer.effect: DropShadow{
            color: "#DDDDDD"
            samples: 32
            radius: 12*dp
            spread: 0.1
        }

        Rectangle{

            radius: 3*dp
            anchors.fill: parent
            border.color: "#44888888"
            Text {
                text: root.text
                anchors.verticalCenter: parent.verticalCenter
                x: 40*dp
                font.pixelSize: config.fontsize
            }
            CustomImage{
                height: 16*dp
                width: 16*dp
                x: 15*dp
                y: 14*dp
                source: type===0 ? "qrc:/picture/msgSuccess.png" : (type===1 ? "qrc:/picture/msgError.png" : "qrc:/picture/msgWarning.png")
            }
        }
    }

}
